<script>
import { mapState } from 'vuex';
import { isMobile } from '@/utils/uaagent';

export default {
  data() {
    return {
      isMobile: isMobile(),
      origin: `${this.$const.STATIC_PATH}/css/index/img/features/`,
      feature: {
        content: {
          text: '内容',
          data: [
            {
              text: '分类',
              icon: 'features-1-1.svg',
            },
            {
              text: '文字',
              icon: 'features-1-2.svg',
            },
            {
              text: '图片',
              icon: 'features-1-3.svg',
            },
            {
              text: '长文',
              icon: 'features-1-4.svg',
            },
            {
              text: '视频',
              icon: 'features-1-5.svg',
            },
            {
              text: '评论',
              icon: 'features-1-6.svg',
            },
            {
              text: '#话题',
              icon: 'features-1-7.svg',
            },
            {
              text: '收藏',
              icon: 'features-1-8.svg',
            },
          ],
        },
        social: {
          text: '社交',
          data: [
            {
              text: '点赞',
              icon: 'features-2-1.svg',
            },
            {
              text: '@提及',
              icon: 'features-2-2.svg',
            },
            {
              text: '关注',
              icon: 'features-2-3.svg',
            },
            {
              text: '私信',
              icon: 'features-2-4.svg',
            },
            {
              text: '通知',
              icon: 'features-2-5.svg',
            },
            {
              text: '认证',
              icon: 'features-2-6.svg',
            },
            {
              text: '主页',
              icon: 'features-2-7.svg',
            },
            {
              text: '分享',
              icon: 'features-2-8.svg',
            },
          ],
        },
        cash: {
          text: '变现',
          data: [
            {
              text: '圈子付费',
              icon: 'features-3-1.svg',
            },
            {
              text: '图片付费',
              icon: 'features-3-2.svg',
            },
            {
              text: '长文付费',
              icon: 'features-3-3.svg',
            },
            {
              text: '视频付费',
              icon: 'features-3-4.svg',
            },
            {
              text: '站长分成',
              icon: 'features-3-5.svg',
            },
            {
              text: '打赏',
              icon: 'features-3-6.svg',
            },
            {
              text: '支付',
              icon: 'features-3-7.svg',
            },
            {
              text: '提现',
              icon: 'features-3-8.svg',
            },
          ],
        },
      },
    };
  },
  computed: {
    ...mapState({
      featureDesc: (state) => state.config.featureDesc || '',
    }),
  },
  methods: {
    handleMouseOver(e) {
      this.$eventbus.emit('discuz-nav-click', e);
    },
    handleMouseLeave() {
      this.$eventbus.emit('discuz-nav-leave');
    },
    handleSkipTo(key) {
      const query = {
        content: 1,
        social: 2,
        cash: 3,
      };
      this.$router.push({ name: 'feature', query: { tab: query[key] || 0 } });
    },
  },
};
</script>

<template>
  <div class="dzq-index-section dzq-index-section--lightbg">
    <div class="dzq-index-section__hd">
      <h2 class="dzq-index-section__title"><span>功能</span></h2>
      <p class="dzq-index-section__description">
        {{ featureDesc }}
      </p>
    </div>
    <div class="dzq-index-section__bd">
      <div class="dzq-layout_section-features">
        <div class="dzq-grid">
          <div v-for="(elem, key) in feature" :key="key" class="dzq-grid__item">
            <div class="dzq-grid__box" @click="handleSkipTo(key)">
              <div class="dzq-layout_section-features-list">
                <div class="dzq-layout_section-features-info">
                  <div class="dzq-layout_section-features-title">
                    {{ elem.text }}
                  </div>
                  <div class="dzq-layout_section-features-box">
                    <div
                      v-for="(item, index) in elem.data"
                      :key="index"
                      class="dzq-layout_section-features-item"
                    >
                      <img :src="`${origin}${item.icon}`" />
                      <p>{{ item.text }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dzq-index-section__ft">
      <a :target="isMobile ? '' : '_blank'" href="https://discuz.chat" class="dzq-btn">
        体验 Q 的功能
      </a>
    </div>
  </div>
</template>
